<template>
  <common-dialog :dialog-title="!edit ? '新建模型表单配置' : '编辑模型表单配置'" :visible.sync="visible"
                 :before-close="handleBeforeClose" v-draggable>

    <template #body>
      <el-form :model="itemInfoForm" label-width="100px" ref="form" size="medium" class="model-form-config-form">
        <el-form-item label="表单标题："
                      prop="formTitle"
                      :rules="[
                { required: true, message: '表单标题不能为空'},
              ]"
        >
          <div style="">

          </div>
          <el-input v-model.trim="itemInfoForm.formTitle" autocomplete="off" placeholder="请输表单标题" class="custom-input"></el-input>
        </el-form-item>

        <el-form-item label="表单编号："
            prop="code"
            :rules="[
                { required: true, message: '表单编号不能为空'},
              ]">
          <el-input v-model.trim="itemInfoForm.code" autocomplete="off" placeholder="请输入表单编号" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item
          label="表单分列数："
          prop="columnCount"
          :rules="[
                { required: true, message: '请选择表单分列数'},
          ]"
        >
          <el-select v-model="itemInfoForm.columnCount" placeholder="请选择表单分列数" :disabled="itemInfoForm.published">
            <el-option
              v-for="item in columnCountOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="表单宽度："
                      prop="formWidth">
          <el-input v-model="itemInfoForm.formWidth" autocomplete="off" placeholder="请输入表单宽度(格式：50px或50%)" class="custom-input"></el-input>
        </el-form-item>

        <el-form-item label="取消按钮名称："
                      prop="cancelBtnName">
          <el-input v-model="itemInfoForm.cancelBtnName" autocomplete="off" placeholder="请输入取消按钮名称" class="custom-input "></el-input>
        </el-form-item>
        <el-form-item label="取消按钮背景色："
                      prop="cancelBtnBgColor">
          <el-color-picker
            v-model="itemInfoForm.cancelBtnBgColor"
            show-alpha
            size="small"
            :predefine="predefineColors">
          </el-color-picker>
        </el-form-item>
        <el-form-item label="取消按钮字色："
                      prop="cancelBtnColor">
          <el-color-picker
            v-model="itemInfoForm.cancelBtnColor"
            show-alpha
            size="small"
            :predefine="predefineColors">
          </el-color-picker>
        </el-form-item>

        <el-form-item label="保存按钮名称："
                      prop="saveBtnName">
          <el-input v-model="itemInfoForm.saveBtnName" autocomplete="off" placeholder="请输入保存按钮名称" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="保存按钮背景色："
                      prop="saveBtnBgColor">
          <el-color-picker
            v-model="itemInfoForm.saveBtnBgColor"
            show-alpha
            size="small"
            :predefine="predefineColors">
          </el-color-picker>
        </el-form-item>
        <el-form-item label="保存按钮字色："
                      prop="saveBtnColor">
          <el-color-picker
            v-model="itemInfoForm.saveBtnColor"
            show-alpha
            size="small"
            :predefine="predefineColors">
          </el-color-picker>
        </el-form-item>

        <el-form-item label="重置按钮名称："
                      prop="resetBtnName">
          <el-input v-model="itemInfoForm.resetBtnName" autocomplete="off" placeholder="请输入重置按钮名称" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="重置按钮背景色："
                      prop="resetBtnBgColor">
          <el-color-picker
            v-model="itemInfoForm.resetBtnBgColor"
            show-alpha
            size="small"
            :predefine="predefineColors">
          </el-color-picker>
        </el-form-item>
        <el-form-item label="重置按钮字色："
                      prop="resetBtnColor">
          <el-color-picker
            v-model="itemInfoForm.resetBtnColor"
            show-alpha
            size="small"
            :predefine="predefineColors">
          </el-color-picker>
        </el-form-item>

      </el-form>
    </template>

    <template #footer>
      <div class="dialog-footer" style="padding-right: 20%;">
        <el-button @click="closeDialog(false)" :disabled="disabled">取 消</el-button>
        <el-button type="primary" @click="saveAndEdit" :disabled="disabled">保存</el-button>
        <el-button type="info" @click="resetForm($refs.form)" :disabled="disabled">重置</el-button>
      </div>
    </template>
  </common-dialog>
</template>

<script>

import CommonDialog from '@/components/common/CommonDialog'
import FormMixins from '@/components/mixins/form/FormMixins'
import {saveAndEdit} from '@/js/api/model/modelFormConfig'

export default {
  name: 'ModelFormConfigForm',
  components: {
    CommonDialog
  },
  mixins: [FormMixins],
  props: {
    edit: {
      default: false,
      type: Boolean
    },
    itemInfo: {
      default: () => {
        return {}
      },
      type: Object
    },
    modelId: {
      type: String
    }
  },
  data(){
    return {
      disabled: false,
      itemInfoForm: {},
      columnCountOptions: [
        {label: '1', value: 1},
        {label: '2', value: 2},
        {label: '3', value: 3},
        {label: '4', value: 4}
      ],
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ]
    }
  },
  methods: {
    saveAndEdit(){
      const canSave = this.validateForm(this.$refs.form)
      if (canSave){
        this._save()
      } else {
        this.$msgAlert('请按要求填好表格数据后，再提交！', 'error')
      }
    },
    async _save(){
      this.disabled = true
      const response = await saveAndEdit(this.itemInfoForm, this.edit)
      if (response.errorMsg) {
        this.$tips(response.errorMsg, 'error')
      } else {
        this.$tips(this.edit ? '数据需改成功' : '数据添加成功')
        this.$emit('updateTable')
        this.closeDialog(false)
      }
      this.disabled = false
    }
  },
  created(){
    if (this.edit || Object.keys(this.itemInfo).length > 0){
      this.itemInfoForm = {...this.itemInfo}
    } else {
      this.itemInfoForm.modelId = this.modelId
      this.$set(this.itemInfoForm, 'columnCount', 1)
    }
  }
}
</script>

<style lang="less">
  .el-dialog__body{
    .model-form-config-form {
      .custom-input {
        .el-input__inner {
          width: 60%;
        }
        .el-input__count {
          left: 60%;
        }
      }
      .el-select--medium {
        width: 60%;
      }
      .el-form-item{
        >.el-form-item__label{
          width: 130px !important;
        }
        >.el-form-item__content {
          margin-left: 130px !important;
        }
      }
    }
  }
</style>
